<%= turbo_frame_tag :resource_form, target: "_top" do %>
  <%= render component("ui/modal").new(title:) do |modal| %>
    <%= solidus_form_for @zone, url: @form_url, html: { id: @form_id, **stimulus_controller, **stimulus_value(name: :kind, value: @zone.kind) } do |f| %>
      <div class="flex flex-col gap-6 pb-4">
        <%= f.text_field(:name, class: "required") %>
        <div class="hidden" <%= tag.attributes(stimulus_target("countriesWrapper")) %>>
          <%= f.select(
            :country_ids,
            Spree::Country.order(:name).map { |c| [c.name, c.id] },
            multiple: true,
            class: "required",
            **stimulus_target("countriesSelect")
          ) %>
        </div>
        <div class="hidden" <%= tag.attributes(stimulus_target("statesWrapper")) %>>
          <%= f.select(
            :state_ids,
            Spree::State.where(id: @zone.state_ids).map { |s| [s.state_with_country, s.id] },
            multiple: true,
            class: "required",
            src: solidus_admin.states_url(view: :state_with_country),
            "data-query-param": "q[name_or_country_name_cont]",
            **stimulus_target("statesSelect")
          ) %>
        </div>
        <%= f.text_field(:description, class: "required") %>
        <%= f.select(
          :kind,
          [[t(".kinds.country"), :country], [t(".kinds.state"), :state]],
          value: @zone.kind || :state,
          **stimulus_action("toggleKind", on: "change")
        ) %>
      </div>
      <% modal.with_actions do %>
        <form method="dialog">
          <%= render component("ui/button").cancel %>
        </form>
        <%= render component("ui/button").submit(resource: @zone, form: @form_id) %>
      <% end %>
    <% end %>
  <% end %>
<% end %>
